<!-- 预约医生排班信息 -->
<template>
	<view class="reg-time-detail-wrapper">
		<view class="header">
			<view class="left-icon">
				<image src="https://zhyl.setupgx.cn/attachment/app/icon/doctor.png"></image>
			</view>
			<view class="center-wrapper">
				<p>{{doctorInfo.DoctorName}}<span class="professional-label">{{doctorInfo.DoctorTitle}}</span></p>
				<p style="font-size: 0.6rem;">{{selectDeptName}}</p>
			</view>
		</view>
		<view class="schedule-wrapper">
			<uni-section title="医生排班信息" type="line">

				<view class="schedule-item" v-for="(item, index) in timeList" :key="index" v-if="item.DepartmentId == selectDeptId">
					<p>{{item.ScheduleDate}} {{item.Time}}</p>
					<view class="right-label">
						<span>微信预约剩余{{item.WeChatAvailableForRegister}}</span>
					</view>
					<div class="clearfix"></div>
				</view>

			</uni-section>
			<uni-section :title="'预约时间段选择，排班：'+''" type="line">
				<view class="" v-if="timeList.length == 0"
					style="width: 100%; text-align: center; padding: 20px 0 20px 0;">
					请先选择排班
				</view>
				<view v-else>
					<!-- <view class="schedule-item" v-for="(item, index) in timeFrameList" :key="index">
						<p>
							{{dateFormatter(item.regBegin)}} - {{dateFormatter(item.regEnd)}} 
							<span style="font-size: .7rem !important; color: #8bc34a; padding-left: 8px;">剩余: {{item.AvailableForAppointment}}</span>
						</p>
						<view @click="goToAppointment(item)"  v-if="item.AvailableForAppointment != 0" class="right-label blue">
							<span>预约</span>
						</view>
						<div class="clearfix"></div>
					</view> -->
					<uni-row :width="730" :gutter="10">
						<uni-col :span="8" v-for="(item, index) in timeFrameList" :key="index">
							<view style="padding: 10px; margin-bottom: 5px; background-color: #f5f5f5; text-align: center; font-size: .8rem; border-radius: 4px;" @click="goToAppointment(item)">
								<p>{{dateFormatter(item.regBegin)}} - {{dateFormatter(item.regEnd)}}</p>
								<p style="color: #8bc34a">{{item.Time}}</p>
								<p style="color: #8bc34a">剩余 {{item.AvailableForAppointment}}</p>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startdate: '',
				selectDeptId: '',
				selectDeptName: '',
				doctorInfo: {},
				timeList: [],
				timeFrameList: []
			}
		},
		onLoad(option) {
			let doctor = JSON.parse(option.item)
			this.selectDeptId = option.selectDeptId
			this.selectDeptName = option.selectDeptName
			this.startdate = option.startdate
			this.api_doctor(doctor.DoctorId, option.startdate, doctor.TimeEnum)
			this.api_doctortime(doctor.DoctorId, option.startdate, doctor.TimeEnum)
		},
		methods: {
			goToAppointment(timeFrame) {
				if (timeFrame.AvailableForAppointment != 0) {
					uni.navigateTo({
						url: "/pagesB/onlineRegistration/appointment?timeFrame=" + JSON.stringify(timeFrame) +
							'&doctorInfo=' + JSON.stringify(this.doctorInfo) + "&startdate=" + this.startdate + '&selectDeptId=' + this.selectDeptId + '&selectDeptName=' + this.selectDeptName
					})
				}else {
					uni.showToast({
						icon: 'none',
						title: '剩余数量为0，请选择其他时间段'
					})
				}
			},

			/**
			 * 获取医生排班列表
			 * @param {Object} docid
			 * @param {Object} startdate
			 */
			api_doctor(docid, startdate, timezone) {
				this.$app._post_form2("entry/wxapp/apiregistration.doctor", {
					"docid": docid,
					"startdate": startdate,
					"enddate": startdate,
					"timezone": timezone
				}, (res) => {
					console.log(res.data)
					if (res.status === 1) {
						if (res.data) {
							this.timeList = res.data
							this.doctorInfo = this.timeList[0]
						}

					}
				})
			},

			/**
			 * 获取医生时段列表
			 * @param {Object} docid
			 * @param {Object} date
			 */
			api_doctortime(docid, date, timezone) {
				this.$app._post_form2("entry/wxapp/apiregistration.doctortime", {
					"docid": docid,
					"date": date,
					"timezone": timezone
				}, (res) => {
					if (res.status === 1) {
						if (res.data) {
							console.log(res.data)
							this.timeFrameList = res.data
						}
					}
				})
			},

			dateFormatter(strDate) {
				if (strDate) {
					let date = new Date(strDate)
					let hours = date.getHours()
					let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
					return hours + ':' + minutes
				}
				return ''
			}
		}
	}
</script>

<style>
	>>> .uni-row {
		padding: 10px;
	}
</style>

<style scoped lang="scss">
	.reg-time-detail-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
		color: #757575;
		padding: 5px;
		box-sizing: border-box;

		.header {
			position: relative;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #EEEEEE;
			background-image: linear-gradient(to right, #41C177, #c8e6c9);
			padding: 12px 15px;
			color: #ffffff;

			.left-icon {
				width: 50px;
				height: 50px;
				border-radius: 50px;
				background-color: #4caf50;
				display: flex;
				flex-direction: row;
				align-items: center;
				text-align: center;
				justify-content: center;

				image {
					width: 30px;
					height: 30px;
				}
			}

			.center-wrapper {
				display: flex;
				flex: 1;
				flex-direction: column;
				padding-left: 10px;
				font-size: 1rem;

				.professional-label {
					margin-left: 6px;
					margin-right: 6px;
					font-size: 0.8rem;
				}
			}
		}

		.schedule-wrapper {

			.schedule-item {
				padding: 10px 6px 10px 6px;
				border-bottom: 1px solid #EEEEEE;
				font-size: 0.8rem;

				p {
					float: left;
				}

				.right-label {
					float: right;

					span {
						font-size: 0.7rem;
						background-color: #4caf50;
						color: #fff;
						padding: 2px 8px 2px 8px;
						border-radius: 10px;
					}

					&.blue {
						span {
							background-color: #2096F3;
						}
					}
				}
			}

		}
	}
</style>